Add Color Picker App with Search Functionality and Color Variants #17
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description:
This pull request adds a fully functional Color Picker app to the project. The app includes the following features:
Search Bar for Hex Codes: Users can input a color hex code into the search bar. The app will generate four different variants of the input color, ranging from light to dark.
Copy to Clipboard: Users can click on any of the generated color variants to copy the corresponding hex code to their clipboard for easy use elsewhere.
Color History: The app also features a color history section where the last 10 searched colors are stored and displayed. Users can click on these colors to copy their hex codes as well.
Responsive Design: The app is fully responsive, ensuring a seamless experience on mobile devices, tablets, and desktops.
Professional UI: The app features a clean and professional design with a gradient background, rounded corners, and smooth hover effects. The container background also includes a subtle gradient to enhance the overall aesthetics.
Screenshots:
Laptop size :
Tablet size:
Mobile size:
How to Test:
Clone the repository.
Navigate to the project directory.
Run npm install to install dependencies.
Run npm run dev to start the development server.
Open the app in your browser and test the features by entering different hex codes and interacting with the color variants.
Related Issue:
This pull request addresses and closes Issue #15.
Additional Notes:
The app is designed to be easily extendable for future enhancements, such as adding more color variants or integrating with color libraries.
Feedback and suggestions for further improvements are welcome!